<template>
  <div class="login-form">
    <div class="form">
      <!-- <div class="form-img">
        <img :src="FormImg" alt="" />
      </div> -->
      <p class="title">泊車服務商戶平台</p>
      <el-form :model="form" class="model" :rules="rules" ref="formRef">
        <div v-if="nonEmpty" class="nonEmpty">{{ shan }}</div>
        <el-form-item class="account-input" prop="account">
          <el-input
            :prefix-icon="User"
            v-model="form.account"
            placeholder="请输入账号"
            style="width: 305px; height: 42px"
            @keyup.enter="handleLogin"
          />
        </el-form-item>
        <el-form-item class="pwd-input" prop="pwd">
          <el-input
            type="password"
            :prefix-icon="Lock"
            v-model="form.pwd"
            placeholder="请输入密码"
            style="width: 305px; height: 42px"
            @keyup.enter="handleLogin"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="handleLogin">
            登录
          </el-button>
        </el-form-item>
      </el-form>
      <div class="form-img3">
        <img :src="FormImg3" alt="" />
      </div>
      <p class="footerTitle">由香港移動與億車科技聯合提供計算服務和技術支持</p>
    </div>
    <img class="form-img2" :src="FormImg2" alt="" />
  </div>
</template>

<script setup>
import FormImg from "../../../assets/image/login/logo.png";
import FormImg2 from "../../../assets/image/login/form_img.png";
import FormImg3 from "../../../assets/image/login/mk-logo.png";
import { User, Lock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import useUserStore from "../../../store/modules/user";
import { login } from "../../../service/modules/user";
import { encrypt } from "../../../utils/crypto";
import { useRouter } from "vue-router";
import storage from '@/utils/storage.js'

const router = useRouter();
const shan = ref("");
const userStore = useUserStore();
const nonEmpty = ref(false);
const form = reactive({
  account: "",
  pwd: "",
});
// const form = reactive({
//   account: "gomansupm",
//   pwd: "goman123456",
// });

const formRef = ref();

const rules = {
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  pwd: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
};

const handleLogin = async () => {
  formRef.value.validate(async (err) => {
    if (err) {
      // userStore.userLogin(form);
      const res = await login({
        userName: form.account,
        password: encrypt(form.pwd),
      });
      console.log("res ===>", res);

      if (res.data.code === 0) {
        nonEmpty.value = false;
        userStore.setInfo(res.data.result);
        userStore.setToken(res.data.result.token);
        router.push(storage.get("MENU_ITEM") ?? "/cardApplication");
      } else {
        nonEmpty.value = true;

        shan.value = res.data.msg;
      }
    }
  });
};
</script>
<style lang="less">
.el-input .el-input__icon {
  font-size: 24px;
  color: #de2910;
}
</style>
<style lang="less" scoped>
.nonEmpty {
  // margin: 0 auto;
  // width: 50%;
  color: #de2910;
  font-size: 12px;
}
.login-form {
  width: 872px;
  height: 434px;
  display: flex;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0px 6px 30px 0px #c7d3df;
  .form {
    flex: 1;
    padding: 33px 59px 25px 72px;
    .form-img {
      width: 100%;
      height: 54px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 18px;
      img {
        width: 66px;
        height: 100%;
      }
    }
    .title {
      font-weight: 600;
      font-size: 30px;
      text-align: center;
      color: #333333;
      font-style: normal;
      text-transform: none;
    }
    .model {
      margin-top: 24px;
      .account-input {
        width: 305px;
        height: 42px;
        margin: 0 auto;
      }
      .pwd-input {
        width: 305px;
        height: 42px;
        margin: 20px auto;
      }
      .login-btn {
        border: none;
        background: linear-gradient(207deg, #f15325 0%, #de2910 100%);
        width: 305px;
        height: 42px;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        margin: 0 auto;
      }
    }
  }
  .form-img2 {
    flex: 1;
  }
  .form-img3 {
    width: 100%;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 236px;
      height: 100%;
    }
  }
}
.footerTitle {
  margin-top: 20px;
  margin-bottom: 11px;
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
</style>
